{% extends 'layout/basic.html' %}

{% block css %}
    <style>
        {#按钮样式#}
        .container {
            text-align: center;
            margin: auto auto 20px;
        }

        .big-button {
            font-size: 24px;
            padding: 5px 200px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;

            margin-top: 30px;
        }

        {#项目列表样式#}
        .center-button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            height: 60px;
            background-color: #007bff;
            color: #fff;
            font-size: 18px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 0 20px; /* 调整按钮内边距 */
            margin: auto;
            margin-top: 30px;
            border: none;
        }

        /* 左边项目名称样式 */
        .project-name {
            flex: 1;
            padding-right: 20px;
        }

        /* 右边项目日期样式 */
        .project-date {
            flex: 1;
            text-align: right;
        }
    </style>
{% endblock %}


{% block content %}


    {#    项目列表#}
    {% for item in project_dict %}
        <button class="center-button project-btn" data-toggle="modal" data-target="#updateModal"
                data-user="{{ item.username }}" data-name="{{ item.name }}" data-text="{{ item.text }}"
                data-starttime="{{ item.start_datetime }}" data-endtime="{{ item.end_datetime }}">
                <span class="project-name">
                    {{ item.name }}
                </span>
            <span class="project-date">
                </span> {{ item.start_datetime }} - {{ item.end_datetime }}

        </button>
    {% endfor %}

    <div class="clear"></div>

    {#    加号#}
    <div class="container">
        <button class="big-button" id="add_button" data-toggle="modal" data-target="#addModal"><span
                class="glyphicon glyphicon-plus"></span></button>
    </div>


    <!-- 增加项目的弹窗 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建项目</h4>
                </div>
                <div class="modal-body">
                    <form id="addForm">
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == "name" or field.name == "text" %}
                                {#  只在项目名和项目描述部分显示#}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error-msg"></span>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改项目的弹窗 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">项目详情</h4>
                </div>
                <div class="modal-body">
                    <form id="updateForm" method="post">
                        {% csrf_token %}
                        <label>任务名</label>
                        <input type="text" id="name" class="form-control"/>
                        <label>任务描述</label>
                        <textarea id="description" class="form-control" rows="6"></textarea>
                        <label>开始时间</label>
                        <input type="text" id="starttime" class="form-control" readonly/>
                        <label>结束时间</label>
                        <input type="text" id="endtime" class="form-control" readonly/>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnUpdate" type="button" class="btn btn-primary">确 定</button>
                    <button id="btnDelete" type="button" class="btn btn-warning">删 除</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script src="../static/plugins/bootstrap-3.4.1"></script>

    <script>

        $(function () {
            add_project();
            update_project();
            delete_project();
            find_project();
        })


        {#增加新项目#}

        function add_project() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: '{% url 'project_add' %}',
                    type: 'POST',
                    data: $('#addForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            //location.href = location.href
                            location.reload();
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            });
                        }
                    }
                });
            });
        }

        {#修改项目#}

        function update_project() {
            var name, text, starttime, endtime;
            var old_data;
            $('.project-btn').click(function () {
                name = $(this).attr('data-name');
                text = $(this).attr('data-text');
                starttime = $(this).attr('data-starttime');
                endtime = $(this).attr('data-endtime');
                old_data = {
                    'name': name,
                    'text': text,
                    'start_datetime': starttime,
                    'end_datetime': endtime,
                }

                $('#name').val(name);
                $('#description').val(text);
                $('#starttime').val(starttime);
                $('#endtime').val(endtime);

            });

            {#console.log(old_data['name'])#}
            $('#btnUpdate').click(function () {
                new_data = {
                    'name': $('#name').val(),
                    'text': $('#description').val(),
                    'start_datetime': $('#starttime').val(),
                    'end_datetime': $('#endtime').val(),
                }

                msg = {
                    'new': new_data,
                    'old': old_data,
                }
                const csrfToken = $('[name=csrfmiddlewaretoken]').val();
                $.ajax({
                    url: '{% url 'project_update' %}', // 修改项目的后端URL
                    type: 'POST',
                    data: JSON.stringify(msg),
                    dataType: 'json',
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader('X-CSRFToken', csrfToken);
                    },
                    success: function (res) {
                        if (res.status) {
                            // 修改成功，刷新页面
                            location.reload();
                        } else {
                            $.each(res.error, function (key, value) {
                                // 处理错误信息
                                $("#id_" + key).next().text(value[0]);
                            });
                        }
                    }
                });


            });
        }

        {#删除项目#}

        function delete_project() {
            $('#btnDelete').click(function () {
                msg = {
                    'name': $('#name').val(),
                }
                const csrfToken = $('[name=csrfmiddlewaretoken]').val();
                $.ajax({
                    url: '{% url 'project_delete' %}', // 删除项目的后端URL
                    type: 'POST',
                    data: msg,
                    dataType: 'JSON',
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader('X-CSRFToken', csrfToken);
                    },
                    success: function (res) {
                        if (res.status) {
                            // 修改成功，刷新页面
                            location.reload();
                        } else {
                            $.each(res.error, function (key, value) {
                                // 处理错误信息
                                $("#id_" + key).next().text(value[0]);
                            });
                        }
                    }
                });
            });
        }

        {#查找项目#}

        function find_project() {

        }
    </script>
{% endblock %}